<template>
    <div class="Chkaijiang" >
        <div class="guding">
            <div class="headerone">
                <span class="src" @click=push></span>
                <span class="title">幸运28</span>
            </div>
            <div class="zhubu">
                <span class="open">开始时间
                    <span @click=" openPicker">{{date}}</span>
                </span>
                <span class="open">结束时间
                    <span @click=" openPicke">{{date1}}</span>
                </span>
                <mt-datetime-picker ref="picker" type="date" :endDate="enddate" @confirm="handleConfirm(1)" v-model="pickerValue" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日">
                </mt-datetime-picker>
                <mt-datetime-picker ref="picke" :endDate="newdate" type="date" @confirm="handleConfirm(2)" v-model="pickerValue" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日">
                </mt-datetime-picker>
            </div>
            <div class="headerlast" >
                <span class="qihao"> 期号</span>
                <span class="kaijiang">开奖号码</span>
                <span class="daxiao">大小单双</span>
            </div>
        </div>
        <!-- tab-container -->

        <div class="fubu" v-infinite-scroll="loadMore" infinite-scroll-distance="0"  infinite-scroll-disabled="loading">

            <div class="headerlast" v-for="(item,i) in data"  :class="{background:i%2!=0}"  >
                <span class="qihao"> {{item.periods}}</span>
                <span class="kaijiang">{{`${item.ball_1}+${item.ball_2}+${item.ball_3}=${item.result}`}}</span>
                <span class="daxiao">{{item.result%2==0?"双":"单"}}{{item.result>14?"大":"小"}}</span>
             
            </div>
        </div>

        <!-- <div>
            <div style="float:left ">555555555555555555555555555555555</div>
            <div id="slider " class="mui-slider " style="float:left ">
                <div id="sliderSegmentedControl " class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ">
                    <div class="mui-scroll ">
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                    </div>
                </div>

            </div>
        </div> -->
    </div>
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js";
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            pickerValue: null,
            date: null,
            date1: null,
            newdate: new Date(),
            enddate: new Date(),
            page: 1,
            data: [],
            loading: null,
        };
    },
    created() {
        this.date = this.formatDate(new Date());
        this.date1 = this.formatDate(new Date());
        this.nedate();
    },
    mounted() {},
    mounted() {
        // 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
        // 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
        // 2. 初始化滑动控件
        mui(".mui-scroll-wrapper").scroll({
            deceleration: 0.0006 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    methods: {
        push(){this.$router.go(-1)},
        loadMore() {
               
            this.loading = true;
            setTimeout(() => {
                ++this.page;
                this. nedate()
                  console.log(this.page)
                this.loading = false;
            }, 2500);

        },
        formatDate: function(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date.getDate();
            d = d < 10 ? "0" + d : d;
            return y + "-" + m + "-" + d;
        },
        nedate: function() {
            this.$http
                .post(
                    "api/Luckyauto/history?page=1",
                    {
                        add_time: this.date,
                        end_time: this.date1
                    },
                    { emulateJSON: true }
                )
                .then(result => {
                    if (result.body.code == 1000) {
                        result.body.data.forEach(element => {
                            this.data.push(element);
                        });
                    } else if (result.body.code == 1000) {
                        Toast("无数据");
                    }
                });
        },
        openPicker() {
            this.$refs.picker.open();
        },
        openPicke() {
            this.$refs.picke.open();
        },
        handleConfirm(i) {
            if (i == 1) {
                this.date = this.formatDate(this.pickerValue);
            } else if (i == 2) {
                this.enddate = this.pickerValue;
                this.date1 = this.formatDate(this.pickerValue);
            }
            this.nedate();
        }
    }
};
</script>
<style lang="scss" scoped>
span {
    display: inline-block;
}

.Chkaijiang {
    .guding {
        position: fixed;
        width: 100%;
        z-index: 99;
    }
    .headerlast {
        display: flex;
        justify-content: flex-start;
        font-size: 0.22rem;
        border: 1px solid #dedede;
        background: #f3f3f3;
        .qihao {
            width: 2rem;
            text-align: center;
            border-right: 1px solid #dedede;
        }
        .kaijiang {
            width: 3.34rem;
            text-align: center;
            border-right: 1px solid #dedede;
            color: #d51313;
        }
        .daxiao {
            width: 2.48rem;
            text-align: center;
        }
    }
    .background {
        background: #fff;
    }
    .headerone {
        width: 100%;
        background: #d51313;
        height: 1rem;
        text-align: center;
        padding: 0 0.3rem;
        line-height: 1rem;
        .title {
            color: #fff;
            font-size: 0.36rem;
            margin: 0 auto;
        }
        .src {
            background: url("../../img/Game/返回2.png");
            height: 0.37rem;
            width: 0.17rem;
            background-size: 0.17rem 0.37rem;
            float: left;
            position: relative;
            top: 0.3rem;
        }
    }
    .zhubu {
        display: flex;
        background: #fff;
        justify-content: space-between;
        .open {
            font-size: 0.28rem;
            margin: 0.3rem 0.1rem;
            span {
                margin-left: 0.1rem;
                border: 1px solid #e0e0e0;
                padding: 0.1rem;
            }
        }
        .mint-tab-item {
            border-bottom: 0.03rem solid #e0e0e0;
        }
        .is-selected {
            border-bottom: 0.03rem solid #d51313;
            color: #d51313;
            margin-bottom: 0px;
        }
        .ml {
            font-size: 0.32rem;
        }
    }

    .fubu {
        padding-top: 3rem;
    }
}
</style>

